<template>
	<div style="">
		<div class="status-circle-icon" :style="{ background: setTagStateStyle(status).color }" style="display: inline-block; margin-bottom: 2px;"></div>
		<span>{{ setTagStateStyle(status).name }}</span>
	</div>
</template>
<script>
    import { noticeStateList } from '../../../../utils/jk/status-option-list';

    export default {
        name: 'OpenState',
        props: {
            status: {
                type: [String, Number],
                default: ''
            },
            size: {
                type: String,
                default: 'mini'
            },
            type: {
                type: String,
                default: 'primary'
            }
        },
        data() {
            return {
                stateList: noticeStateList,
                isActive: false
            };
        },
        methods: {
            setTagStateStyle(status) {
                const item = this.stateList.find(x => x.id === status) || {};
                return item;
            }
        }
    };
</script>
<style scoped lang="scss">
.status-circle-icon {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 4px;
}
</style>
